<template>
  <div class="container">
    <el-card>
      <!-- 表单 -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        v-if="$route.query.id"
        class="bread"
      >
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="formInline"
      >
        <div class="fl">
          <el-form-item label="目录名称" class="menu">
            <el-input v-model="formInline.directoryName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clearFn">清除</el-button>
            <el-button type="primary" @click="searchFn">搜索</el-button>
          </el-form-item>
        </div>
        <div class="fr">
          <el-button
            class="back"
            v-if="(btnshow = this.$route.query.id)"
            @click="backFn"
          >
            <i class="el-icon-back"></i>
            返回学科
          </el-button>
          <el-button type="success" class="addMenu" @click="addFn">
            <i class="el-icon-edit"></i>
            新增目录</el-button
          >
        </div>
      </el-form>
      <!-- 小i -->

      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <i class="el-alert__icon el-icon-info" info></i> 数据一共
          {{ total }} 条
        </div>
      </el-col>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="date" label="序号" type="index">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者">
          <template slot-scope="scope">
            {{ scope.row.username + scope.row.creatorID }}
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            <!-- {{ parseTimeByString(scope.row.addDate) }} -->
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>

        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {{ useOrno(scope.row.state) }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="stateFn(scope.row)">{{
              scope.row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              size="small"
              @click="editFn(scope.row)"
              :disabled="scope.row.state === 1"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="delFn(scope.row)"
              :disabled="scope.row.totals > 0 || scope.row.state === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        class="devide"
        :total="total"
        :page-size="10"
        layout=" prev,pager,next,sizes,jumper"
        :page-sizes="[1, 3, 5, 10]"
        :current-page="params.page"
        @size-change="handleSizeChange"
        @current-change="curPaChange"
        v-if="showP"
      >
      </el-pagination>

      <el-dialog
        :visible.sync="showDialog"
        :title="isEdit ? '修改' : '添加'"
        width="30%"
      >
        <directorys
          v-if="showDialog"
          :pid="curId"
          :isEdit="isEdit"
          :showDialog="showDialog"
          @closeDialog="closeDialog"
        ></directorys>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list as getList, remove, changeState } from '@/api/hmmm/directorys'
import { status } from '@/api/hmmm/constants'
import directorys from '../components/directorys-add'
status.forEach((item) => {
  status[item.label] = item.value
})
export default {
  components: {
    directorys
  },
  async created () {
    this.showBack() // 显示返回按钮
    if (this.$route.query.id && this.$route.query.name) {
      const res = await getList()
      console.log(res)
      this.tableData = res.data.items.filter(
        (item) => item.subjectName === this.$route.query.name
      )
      this.params = res.data.items
      console.log(this.tableData)
      this.total = this.tableData.length
      if (this.total > this.params.pagesize) {
        this.showP = true
      } else {
        this.showP = false
      }
    } else {
      // this.params
      this.getList()
    }
  },
  data () {
    return {
      // 表单绑定的数据
      formInline: {
        directoryName: '',
        state: ''
      },
      tableData: [], // 表格数据
      total: 0, // 表格总条数
      params: {
        // 定义一个对象存页码相关的数据
        page: 1, // 默认页码数
        pagesize: 10 // 每页显示几条数据
      },
      showDialog: false, // 是否显示弹窗
      isEdit: false, // 是否是编辑
      curId: {}, // 当前点击的id
      btnshow: '', // 返回学科显示隐藏
      subList: {
        subjectName: ''
      },
      showP: true
    }
  },
  methods: {
    backFn () {
      this.$router.push('/subjects/list')
    },
    // 显示隐藏返回按钮的方法
    showBack () {
      if (this.$route.query.id) {
        this.showBack = this.$route.query.id
      }
    },
    // 状态
    async doStart (row) {
      row.state = 0
      console.log('启用', row.state)
      await changeState({ id: row.id, state: row.state })
      console.log(123)
      this.getList({ ...this.params, directoryName: this.formInline.directoryName, state: this.formInline.state })
      console.log(123)
    },
    async doEnd (row) {
      row.state = 1
      console.log('禁用', row.state)
      await changeState({ id: row.id, state: row.state })
      this.getList({ ...this.params, directoryName: this.formInline.directoryName, state: this.formInline.state })
    },
    stateFn (row) {
      row.state === 1 ? this.doStart(row) : this.doEnd(row)
    },
    // 时间处理(字符串截取) 只能处理时分秒或年月日
    // parseTimeByString (oldDate) {
    // //   console.log('需要做格式化的日期', oldDate)
    //   return oldDate.substr(0, 30)
    // },
    // 新增功能
    addFn () {
      this.showDialog = true
      this.isEdit = false
    },
    // 关闭弹窗并重新加载列表
    closeDialog () {
      this.showDialog = false // 关闭弹窗
      this.getList() // 重新加载列表
    },
    // 搜索功能
    async searchFn () {
      const res = await getList({
        ...this.formInline,
        subjectName: this.$route.query.name
      })
      this.tableData = res.data.items
      console.log(res.data.items)
      this.total = res.data.counts
    },
    // 获取表单列表
    async getList (data) {
      // 调接口
      let res = null
      if (this.formInline.directoryName || this.formInline.state) {
        res = await getList({ ...this.params, directoryName: this.formInline.directoryName, state: this.formInline.state })
        this.tableData = res.data.items
        //   this.params = res.data.items
        console.log(res)
        // 把总条数赋给定义的变量
        this.total = res.data.counts
      } else {
        res = await getList({ ...this.params })
        // 把获取的数据赋给定义的数组
        this.tableData = res.data.items
        //   this.params = res.data.items
        console.log(res)
        // 把总条数赋给定义的变量
        this.total = res.data.counts
        //   this.isState = res.data.items.state
        //   this.nameList = res.data.items.directoryName
      }
    },
    // 处理禁用与否
    useOrno (value) {
      const rs = status.find((item) => item.value === value)
      return rs.label
    },
    // 翻页功能
    curPaChange (curPage) {
      // 1.把当前的页码传进去
      this.params.page = curPage
      // 2.重新请求数据
      this.getList()
    },
    // 每页显示几条数据
    handleSizeChange (val) {
      this.params.pagesize = val
      this.getList()
    },
    // 清空表单数据
    clearFn () {
      this.formInline = {
        user: '',
        region: ''
      }
    },
    // 删除功能
    delFn (id) {
      this.$confirm('是否删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove(id)
          console.log('删除数据', res)
          // 提示用户
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.tableData.length === 1) {
            this.params.page--
            if (this.params.page === 0) {
              this.params.page = 1
            }
          }
          // 在一次更新数据
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改功能
    editFn (id) {
      // 1.显示弹层
      this.showDialog = true
      // 2.显示已有的数据
      //   把id传给子组件
      this.curId = id
      console.log(this.curId)
      // 传递一个表示告诉他是编辑状态
      this.isEdit = true
    }
  }
}
</script>

<style scoped >
.fl {
  float: left;
}
.fr {
  float: right;
}
.container {
  padding: 10px;
}
.menu {
  margin-left: 10px;
}
.status {
  margin-left: 30px;
}

.el-row {
  margin-bottom: 20px;
}
.bg-purple-light {
  background: #d9dadc;
  line-height: 30px;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 12px;
  color: rgb(132, 127, 127);
}
.bg-purple-light {
  background: #d9dadc;
  line-height: 30px;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 12px;
  color: rgb(132, 127, 127);
}
.back {
  border: 0;
  color: cornflowerblue;
}
.devide {
  float: right;
}
.bread {
  margin-top: 10px;
  margin-left: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(208, 203, 203);
}
</style>
